<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24" style="text-align: right;">
				<el-button type="primary" size="small" @click="add">新增</el-button>
				<el-button type="primary" size="small" @click="edit">编辑</el-button>
				<el-button type="primary" size="small" @click="start">启用</el-button>
				<el-button type="primary" size="small" @click="stop">停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="tableData.dataList" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="80">
				</el-table-column>
				<el-table-column prop="spType" label="索赔类型">
				</el-table-column>
				<el-table-column prop="refType" label="关联类型" :formatter="refTypeChange">
				</el-table-column>
				<el-table-column prop="refRel" label="关联关系" :formatter="refRelChange">
				</el-table-column>
				<el-table-column prop="refValue" label="关联项">
				</el-table-column>
				<el-table-column prop="dispOrder" label="优先级">
				</el-table-column>
				<el-table-column prop="status" label="状态" :formatter="statusChange">
				</el-table-column>
			</el-table>
			<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
			</el-pagination>
		</el-row>
		<el-dialog v-model="formShow" size="tiny">
			<el-form :model="tableFormData" label-width="100px" ref="tableForm" :rules="tableFormRule">
				<el-form-item label="索赔类型:" prop="spType">
					<el-select size="small" v-model="tableFormData.spType" placeholder="请选择">
						<el-option v-for="item in spTypeCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="关联类型:" prop="refType">
					<el-select size="small" v-model="tableFormData.refType" placeholder="请选择">
						<el-option v-for="item in maintRefData" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="关联关系:" prop="refRel">
					<el-select size="small" v-model="tableFormData.refRel" placeholder="请选择">
						<el-option label="包含" value="0">
						</el-option>
						<el-option label="等于" value="1">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="关联项:" prop="refValue">
					<el-input size="small" v-model="tableFormData.refValue"></el-input>
				</el-form-item>
				<el-form-item label="优先级:" prop="dispOrder">
					<el-input-number v-model="tableFormData.dispOrder" :min="1" :max="999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="save">提交</el-button>
				<el-button @click="formShow = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				//suopeileixing 
				spTypeCombo:[],
				//关联类型。
				maintRefData:[],
				//分页
				CurentPage: 1,
				page: this.page,
				//表格数据
				tableData: {
					total: 0,
					dataList: []
				},
				//复选框选择数据
				selectData: [],
				//form表单显示
				formShow: false,
				//form表单数据
				tableFormData: {
					id: '',
					status:'1',
					spType: '',
					refType: '',
					refRel: '',
					refValue: '',
					dispOrder: ''
				},
				//form表单初始化
				emptyFormData: {
					id: '',
					status:'1',
					spType: '',
					refType: '',
					refRel: '',
					refValue: '',
					dispOrder: ''
				},
				//form表单校验规则
				tableFormRule: {
					spType: [{
						required: true,
						message: '请选择索赔类型',
						trigger: 'blur'
					}],
					refType: [{
						required: true,
						message: '请选择关联类型',
						trigger: 'blur'
					}],
					refRel: [{
						required: true,
						message: '请选择关联关系',
						trigger: 'blur'
					}],
					refValue: [{
						required: true,
						message: '请输入关联项',
						trigger: 'blur'
					}],
				},
			}
		},
		methods: {
			//分页查询
			handleCurrentChange: function(currentPage) {
				debugger;
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//复选框
			handleSelectionChange: function(val) {
				this.$data.selectData = val;
			},
			//查询
			query: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/Claim/page', //url
					params: { //发送的参数
						start: this.$data.CurentPage, //页码
						limit: this.$data.page.pageSize //每页的数量
					}
				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					this.$data.tableData = resp.data;
				}, function(error) {
					// error
				})
			},
			//新增
			add: function() {
				this.$data.formShow = true;
				this.$data.tableFormData = Object.assign(this.$data.tableFormData, this.$data.emptyFormData);
			},
			//编辑
			edit: function() {
				if(this.$data.selectData.length == 1) {
					debugger;
					this.$http({
						method: 'GET',
						url: this.API_ROOT + '/crm/Claim/info', //url
						params: { //发送的参数
							id: this.$data.selectData[0].id, //查询条件
						}
					}).then(function(resp) {
						this.$data.formShow = true;
						this.$data.tableFormData = resp.data.data;
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			//启用
			start: function() {
				if (this.$data.selectData.length == 1) {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/Claim/start', //url
					params: { //发送的参数
						id: this.$data.selectData[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.query();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}

			},
			//停用
			stop: function() {
				if (this.$data.selectData.length == 1) {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/Claim/type/stop', //url
					params: { //发送的参数
						id: this.$data.selectData[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.query();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择数据")
			}

			},
			//保存
			save: function() {
				this.$refs.tableForm.validate(function(valid) {
					if(valid) {
						this.$http.post(this.API_ROOT + '/crm/Claim/save', this.$data.tableFormData)
							.then(resp => {
								debugger;
								if(resp.data.success) {
									debugger;
									this.$message(resp.data.msg);
									this.query();
									this.$data.formShow = false;
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					}
					return false;
				}.bind(this));

			},
			//状态转换
			statusChange: function(row,column){
				if(row.status ==1)return "已启用";
				return "已停用";
			},
			refTypeChange: function(row,column){
				if(row.refType ==0)return "关联类别";
				if(row.refType ==1)return "关联项目";
			},
			refRelChange: function(row,column){
				if(row.refRel ==0)return "包含";
				if(row.refRel ==1)return "等于";
			},
		},
		//进入页面时调用方法
		created: function() {
			//查询
			this.query();
			//Huoqu suopei leixing
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "02030111"
				}
			}).then((response) => {
				this.$data.spTypeCombo = response.data;
			}, (response) => {});
			//关联类型
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "maintRef"
				}
			}).then((response) => {
				this.$data.maintRefData = response.data;
			}, (response) => { });
		}
	}
</script>

<style>

</style>